<template>
<div class="page-container-padding">
  <!-- 查询条件 -->
  <div>
    <span style="margin:0 6px;">人员</span>
    <el-select v-model="queryUser" size="mini" style="width:150px;">
      <el-option v-for="user in userList" :value="user.id" :label="user.admin_name" :key="user.id"></el-option>
    </el-select>
    <span style="margin:0 6px;">日期</span>
    <span>
      <el-date-picker
      style="width:220px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        :clearable="false"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQuerySpecialTask">查询</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthSpecialTask">上一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthSpecialTask">下一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearSpecialTask">全年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearSpecialTask">上一年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearSpecialTask">下一年</el-button></span>
  </div>
  <!-- 显示数据 -->
  <div style="margin-top: 6px;">
    <div v-if="taskList.length>0">
      <div>
        <el-table border stripe :data="taskList">
          <el-table-column prop="admin_name" label="姓名" width="100px"></el-table-column>
          <el-table-column prop="create_date" label="日期" width="100px"></el-table-column>
          <el-table-column prop="title" label="标题" width="300px"  show-overflow-tooltip></el-table-column>
          <el-table-column prop="applicant" label="申请者" width="100px" align="right" show-overflow-tooltip></el-table-column>
          <el-table-column prop="score" label="评级得分" width="110px" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.editScore" style="display:flex;align-items:center;">
                <el-input v-model="scope.row.score" size="mini"></el-input>
                <i class="el-icon-success" style="color:green;cursor:pointer;" @click="toSaveEditObj(scope.row)"></i>
              </div>
              <div v-else>{{ scope.row.score }} <i class="el-icon-edit table-edit-icon" @click="scope.row.editScore=true"></i></div>
            </template>
          </el-table-column>
          <el-table-column prop="examined_zh" label="是否有效" width="110px" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.editExamine" style="display:flex;align-items:center;">
                <el-select v-model="scope.row.is_examined" size="mini">
                  <el-option :value="1" label="是"></el-option>
                  <el-option :value="0" label="否"></el-option>
                </el-select>
                <i class="el-icon-success" style="color:green;cursor:pointer;" @click="toSaveEditObj(scope.row)"></i>
              </div>
              <div v-else>{{ scope.row.is_examined===1?'是':'否' }} <i class="el-icon-edit table-edit-icon" @click="scope.row.editExamine=true"></i></div>
            </template>
          </el-table-column>
          <el-table-column label="附件" width="300px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.annex" class="annex-file" @click="toDownloadAnnex(scope.row)">
                <vab-icon :icon="['fas', 'download']"></vab-icon> {{ scope.row.annex }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination style="margin-top:5px;"
        background
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChange">
      </el-pagination>
    </div>
    <div v-else>
      <el-empty description="查询条件无数据"></el-empty>
    </div>
  </div>
</div>
</template>

<script>
import { fileStorage } from '@/config'
import { getMonthDatePoint,getYearDatePoint,datetimeToStr } from '@/utils/datetimeUtils'
import { getAnalystList } from '@/api/user'
import { getSpecialTask, saveSpecialTask } from '@/api/departmentWork/specialTask'
export default{
  data(){
    return {
      dateRange: [],
      userList: [],
      queryUser: 0,
      page: 1,
      pageSize: 50,
      totalCount: 0,
      taskList: []
    }
  },
  mounted() {
    this.setCurrentDates()
    this.queryAnalysts()
    this.querySpecialTask()
  },
  methods: {
    setCurrentDates(){
      let flag = new Date().getDate() < 10?'previous':'current'
      this.dateRange = getMonthDatePoint(new Date(), flag)
    },
    queryAnalysts(){
      getAnalystList().then(res => {
        this.userList = res.data
        this.userList.splice(0, 0, {id: 0, admin_name: '全部'})
      })
    },

    toQuerySpecialTask(){
      this.setCurrentDates()
      this.querySpecialTask()
    },

    querySpecialTask(){
      const paramData = {
        page: this.page,
        page_size: this.pageSize,
        start: datetimeToStr(this.dateRange[0], true, ''),
        end: datetimeToStr(this.dateRange[1], true, ''),
        user: this.queryUser
      }
      getSpecialTask(paramData).then(res => {
        const data = res.data
        this.taskList = data.data.map(item=>{
          item.editScore=false
          item.editExamine=false
          return item
        })
        this.page = data.page
        this.totalCount = data.total_count
      })
    },

    currentPageChange(page){
      this.page = page
      this.querySpecialTask()
    },

    // 保存修改的记录
    toSaveEditObj(row){
      const data = {
        tid: row.id,
        score: row.score,
        is_examined: row.is_examined
      }
      saveSpecialTask(data).then(res => {
        this.$baseMessage(res.msg, res.code===200?'success':'error')
        row.editScore=false
        row.editExamine=false
      })
    },

    // 下载附件
    toDownloadAnnex(row){
      let a = document.createElement("a")
      a.href = fileStorage + row.annex_url
      a.target = '_blank'
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },

    // 点击上一个月
    preMonthSpecialTask(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
      this.querySpecialTask()
    },

    // 点击下一个月
    nextMonthSpecialTask(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
      this.querySpecialTask()
    },

    // 点击全年
    yearSpecialTask(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'current')
      this.querySpecialTask()
    },

    // 点击上一年
    preYearSpecialTask(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'previous')
      this.querySpecialTask()
    },

    // 点击下一年
    nextYearSpecialTask(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'next')
      this.querySpecialTask()
    },
  }
}
</script>

<style scope lang="scss">
.table-edit-icon{
  float:right;margin-top:5px;cursor:pointer;
}
.annex-file{cursor:pointer;&:hover{color:#1266b2;}}
</style>
